<template>
  <div class="user-info-display">
    <div class="user-avatar">
      <a-avatar :size="80" :src="userStore.userInfo.avatar" class="avatar-img">
        {{ userStore.userInfo.nickname?.charAt(0) || 'U' }}
      </a-avatar>
      <a-button type="text" class="edit-avatar-btn" @click="handleEditAvatar">
        <EditOutlined />
      </a-button>
    </div>

    <div class="user-details">
      <h3 class="user-name">{{ userStore.userInfo.nickname || '未设置昵称' }}</h3>
      <p class="user-phone">{{ userStore.userInfo.phone }}</p>
      <div class="user-meta">
        <div class="meta-item" v-if="userStore.userInfo.job_title">
          <UserOutlined />
          <span>{{ userStore.userInfo.job_title }}</span>
        </div>
        <div class="meta-item" v-if="userStore.userInfo.gender !== undefined">
          <span>{{ genderText }}</span>
        </div>
      </div>
      <div class="user-intro" v-if="userStore.userInfo.introduction">
        <p>{{ userStore.userInfo.introduction }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IUserInfo } from '@/interface/user';
import { useUserStore } from '@/stores/user';
import { EditOutlined, UserOutlined } from '@ant-design/icons-vue';
import { computed } from 'vue';

interface Props {
  userInfo?: IUserInfo;
}

const props = defineProps<Props>();
const userStore = useUserStore();
const emit = defineEmits<{
  editAvatar: [];
}>();

const genderText = computed(() => {
  if (!userStore.userInfo.gender) {
    return '未设置';
  }
  switch (userStore.userInfo.gender) {
    case 0:
      return '女';
    case 1:
      return '男';
    default:
      return '未设置';
  }
});

const handleEditAvatar = () => {
  emit('editAvatar');
};
</script>

<style lang="less" scoped>
.user-info-display {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;

  .user-avatar {
    position: relative;
    flex-shrink: 0;

    .avatar-img {
      border: 3px solid #f1f5f9;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .edit-avatar-btn {
      position: absolute;
      bottom: -4px;
      right: -4px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #667eea;
      color: white;
      border: 2px solid white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
      transition: all 0.2s ease;

      &:hover {
        background: #5a67d8;
        transform: scale(1.05);
      }
    }
  }

  .user-details {
    flex: 1;
    min-width: 0;

    .user-name {
      font-size: 24px;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 8px 0;
      line-height: 1.2;
    }

    .user-phone {
      font-size: 14px;
      color: #64748b;
      margin: 0 0 16px 0;
    }

    .user-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 16px;

      .meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        color: #64748b;
        background: #f8fafc;
        padding: 6px 12px;
        border-radius: 20px;
        border: 1px solid #e2e8f0;
      }
    }

    .user-intro {
      p {
        font-size: 14px;
        color: #64748b;
        line-height: 1.6;
        margin: 0;
        background: #f8fafc;
        padding: 12px;
        border-radius: 8px;
        border-left: 3px solid #667eea;
      }
    }
  }
}

@media (max-width: 768px) {
  .user-info-display {
    flex-direction: column;
    align-items: center;
    text-align: center;

    .user-details {
      .user-meta {
        justify-content: center;
      }
    }
  }
}
</style>
